<div class="demo demo-space">
  <nz-input-group nzAddOnBefore="http://" nzAddOnAfter=".com">
    <input nz-input [(ngModel)]="value" />
  </nz-input-group>

  <nz-input-group
    [nzAddOnBefore]="protocolSelector"
    [nzAddOnAfter]="domainSelector"
  >
    <input nz-input [(ngModel)]="value" />
  </nz-input-group>
  <ng-template #protocolSelector>
    <nz-select [(ngModel)]="protocol">
      <nz-option nzValue="http://" nzLabel="http://" />
      <nz-option nzValue="https://" nzLabel="https://" />
    </nz-select>
  </ng-template>
  <ng-template #domainSelector>
    <nz-select [(ngModel)]="after">
      <nz-option nzValue=".com" nzLabel=".com" />
      <nz-option nzValue=".net" nzLabel=".net" />
    </nz-select>
  </ng-template>

  <nz-input-group nzAddOnAfterIcon="setting">
    <input nz-input [(ngModel)]="value" />
  </nz-input-group>
</div>
